<style lang="stylus" rel="stylesheet/stylus" src="./newPlayerValue.styl"></style>
<template>
	<div class="newPlayerValue realTimeDataClass accQuery" :style="{width:pageWidth}">
		<div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
			<div class="listName" :style='{"color":this.$store.getters.theme[6]}'> <i class="icon iconfont">&#xe7d8;</i>
				<span class="title1">当前位置/付费分析/</span>
				<span>{{title}}</span>
			</div>
			<div class="right_header_time">
				<div class="block">
					<span>选择日期范围：</span>
					<el-date-picker
						size='small'
						v-model="date"
						type="daterange"
						align="left"
						placeholder="选择日期范围"
						@change='dateChange'
						:picker-options="pickerOptions"></el-date-picker>
				</div>
			</div>
			<div class="choose_plat">
				<el-menu :theme="this.$store.getters.theme[4]"
	        :default-active="navDefault" class="el-menu-demo" mode="horizontal" @select="handleSelect">
					<el-menu-item index="0" :style='{"border":"1px solid"+this.$store.getters.theme[0]}'>全平台</el-menu-item>
					<el-menu-item index="3" :style='{"border":"1px solid"+this.$store.getters.theme[0]}'>安卓</el-menu-item>
					<el-menu-item index="2" :style='{"border":"1px solid"+this.$store.getters.theme[0]}'>iOS</el-menu-item>
					<el-menu-item index="9" :style='{"border":"1px solid"+this.$store.getters.theme[0]}'>通用</el-menu-item>
					<el-menu-item index="4" :style='{"border":"1px solid"+this.$store.getters.theme[0]}'>高级筛选</el-menu-item>
				</el-menu>
			</div>
		</div>
		<div class="right_content">
			<div class="listChart2" style="display:none;">
				<div class="listChart1_title" :style='{"background":this.$store.getters.theme[5],"color":this.$store.getters.theme[6]}'>
					<p class='zoomIn animated'>新玩家价值总体数据</p>
					<el-button type="primary" size="mini" class="excel" style='float:right;margin-right:15px;margin-top:7px;'  @click="excel(playerAllTableHead,playerAllTableData,'付费分析-新玩家价值总体数据')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
						<i class="icon iconfont">&#xe7f0;</i> 导出excel
					</el-button>
				</div>
				<div class="playerAll" id='playerAll' v-loading="isloading" element-loading-text="拼命加载中" style="width:100%;height:400px;"></div>
				<div class="realTimeServiceTable">
					<div class="realTimeServiceTableBody">
						<template>
						  <el-table
						  	
						    :data="playerAllTableData"
						    border
						    :style="{width:realTimeServiceTableWidth}"
						    :default-sort = "{prop: 'data2', order: 'descending'}"
						    >
						    <el-table-column sortable align="center"
						        v-for="col in playerAllTableHead"
						        :prop="col.prop" :label="col.label" :min-width='col.width'>
						    </el-table-column>
						  </el-table>
						</template>
					</div>
				</div>
			</div>
			<div class="listChart2">
				<div class="listChart1_title" :style='{"background":this.$store.getters.theme[5],"color":this.$store.getters.theme[6]}'>
					<p class='zoomIn animated'>新玩家价值</p>
				</div>
				<div class="payTrend" id="payTrend" v-loading="isloading" element-loading-text="拼命加载中"  style="width:100%;height:400px;"></div>
				<div class="realTimeServiceTable">
					<div class="listChart1_title" :style='{"background":this.$store.getters.theme[5],"color":this.$store.getters.theme[6]}'>
						<p class='zoomIn animated'>新玩家价值</p>
						<el-button type="primary" size="mini" class="excel" style='float:right;margin-right:15px;margin-top:7px;'  @click="excel(payTypesTabelHead,payTypesTabelData,'付费分析-新玩家数据')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
							<i class="icon iconfont">&#xe7f0;</i> 导出excel
						</el-button>
					</div>
					<div class="realTimeServiceTableBody">
						<template>
						  <el-table
						  	v-loading="loading"
	    					element-loading-text="拼命加载中"
						    :data="payTypesTabelData"
						    border
						    :style="{width:realTimeServiceTableWidth}"
						    :default-sort = "{prop: '0', order: 'ascending'}"
						    >
						    <el-table-column sortable align="center"
						        v-for="col in payTypesTabelHead"
						        :prop="col.prop" :label="col.label" width="150">
						    </el-table-column>
						  </el-table>
						</template>
					</div>
				</div>
			</div>
			<div class="listChart2">
				<div class="listChart1_title" :style='{"background":this.$store.getters.theme[5],"color":this.$store.getters.theme[6]}'>
					<p class='zoomIn animated'>新玩家价值对比</p>
				</div>
				<el-tabs type="border-card" v-model="activeCompare" @tab-click="handleClick">
				  <el-tab-pane label="平台对比" name="plat">
				  	<div class="platContrast" id="platContrast" v-loading="isloading" element-loading-text="拼命加载中"  style="width:100%;height:800px;"></div>
				  </el-tab-pane>
				  <el-tab-pane label="渠道对比" name="channel">
				  	<div class="channelContrast" id="channelContrast" v-loading="isloading" element-loading-text="拼命加载中"  style="width:100%;height:800px;"></div>
				  </el-tab-pane>
				  <el-tab-pane label="区服对比" name="server">
				  	<div class="serverContrast" id="serverContrast" v-loading="isloading" element-loading-text="拼命加载中"  style="width:100%;height:800px;"></div>
				  </el-tab-pane>
				</el-tabs>
				<div class="realTimeServiceTable">
			      	<div class="realTimeServiceTableHeader" :style='{"background":this.$store.getters.theme[5]}'>
						<span :style='{"color":this.$store.getters.theme[6]}' class="zoomIn animated">新玩家价值对比</span>
						<el-button type="primary" size="mini" class="excel"  @click="excel(compareTableHead,compareTableData,'付费分析-新玩家价值对比')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
							<i class="icon iconfont">&#xe7f0;</i> 导出excel
						</el-button>
					</div>
				    <div class="realTimeServiceTableBody">
						<template>
						  <el-table
						  	v-loading="loading"
	    					element-loading-text="拼命加载中"
						    :data="compareTableData"
						    border
						    :style="{width:realTimeServiceTableWidth}"
						    :default-sort = "{prop: '0', order: 'ascending'}"
						    >
						    <el-table-column sortable align="center"
						        v-for="col in compareTableHead"
						        :prop="col.prop" :label="col.label" width="150">
						    </el-table-column>
						  </el-table>
						</template>
					</div>
				</div>
			</div>
		</div>
		<a href="" :download="xlsxTitle+'.xlsx'" id="hf"></a>
		<v-advance ref="advance" :channels='channels' :servers="servers" @get="getData" :post-obj='postObj'></v-advance>
	</div>
</template>
<script src="./newPlayerValue.js"></script>